{block name="main"}

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="{:url('admin/index/index')}">首页</a>
        </li>

        <li>
            相册管理
        </li>
        <li class="active">创建相册</li>
    </ul><!-- .breadcrumb -->

</div>
<div class="container" style="margin-top: 30px;">
    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <form class="form-horizontal" id="add-form"  role="form" onsubmit="return reForm();" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="imgbox_name"> 相册名称： </label>
                    <div class="col-sm-9">
                        <input type="text" id="imgbox_name" placeholder="名称" onblur="reName();" name="imgbox_name" class="col-xs-10 col-sm-5" />
                        <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="imgbox_desc"> 相册描述： </label>
                    <div class="col-sm-9">
                        <input type="text" id="imgbox_desc" placeholder="名称" onblur="reDesc();" name="imgbox_desc" class="col-xs-10 col-sm-5" />
                        <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                    </div>
                </div>


                <div class="clearfix">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info btn-doadd" type="button">
                            <i class="icon-ok bigger-110"></i>
                            提交
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    $(function(){
        $('#imgbox_name').focus();
    });

    function reName(){
        var imgbox_name = $('#imgbox_name').val();
        if(!/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/.test(imgbox_name)){
            $('.middle').eq(0).html('不能包含特殊符号。1到10字符').css({'color': 'red'});
            return false;
        }else{
            $('.middle').eq(0).html('正确').css({'color': 'green'});
            return true;
        }
    }

    function reDesc(){
        var imgbox_desc = $('#imgbox_desc').val();
        if(!/^([a-zA-Z0-9\u4e00-\u9fa5\· \,\.\。\!]{1,20})$/.test(imgbox_desc)){
            $('.middle').eq(1).html('不能包含特殊符号。1到20字符').css({'color': 'red'});
            return false;
        }else{
            $('.middle').eq(1).html('正确').css({'color': 'green'});
            return true;
        }
    }


    $('.btn-doadd').click(function(){
        if(reName() && reDesc()){
            var info = $('#add-form input').serialize();
            $.ajax({
                type : 'post',
                data : info,
                url : "/imgbox",
                datatype :'json',
                success : function(data){
                    console.log(data);
                    if(data.status){
                        alert('添加成功');
                        $('#showimgbox').click();
                    }else{
                        alert('添加失败');
                    }
                },
                error : function(){
                    alert('请求失败');
                }
            });
        }else{
            alert('验证不通过');
        }

    });
</script>


{/block}